<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org">

<head>
    <meta charset="utf-8">
    <title>ECharts</title>
    <script src="/js/jquery.min.js?v=2.1.4"></script>
    <!-- 引入 echarts.js -->
    <script th:src="@{/webjars/echarts/4.1.0/dist/echarts.js}"></script>
    <script th:src="@{/webjars/echarts/4.1.0/lib/theme/light.js}"></script>
    <script th:src="@{/webjars/echarts/4.1.0/lib/theme/dark.js}"></script>
</head>

<body>
<!-- 为ECharts准备一个具备大小（宽高）的Dom -->
<div id="main" style="width: 600px;height:400px;"></div>
<script type="text/javascript">
    // 基于准备好的dom，初始化echarts实例
    var myChart = echarts.init(document.getElementById('main'), 'light');

    // 指定图表的配置项和数据
    // var option = {
    //     title: {
    //         text: 'ECharts 入门示例'
    //     },
    //     tooltip: {},
    //     legend: {
    //         data:['销量']
    //     },
    //     xAxis: {
    //         data: ["衬衫","羊毛衫","雪纺衫","裤子","高跟鞋","袜子"]
    //     },
    //     yAxis: {},
    //     series: [{
    //         name: '销量',
    //         type: 'bar',
    //         data: [5, 20, 36, 10, 10, 20]
    //     }]
    // };

    $.getJSON('/api/oauthUsers/statistics/sex', function(data){
        if(data['code'] == 200){
            option = {
                title: {
                    text: '注册用户男女比例',
                    subtext: '',
                    x: 'center'
                },
                tooltip: {
                    trigger: 'item',
                    formatter: "{a} <br/>{b} : {c} ({d}%)"
                },
                // legend: {
                //     orient: 'vertical',
                //     left: 'left',
                //     data: ['直接访问','邮件营销','联盟广告','视频广告','搜索引擎']
                // },
                series: [{
                    name: '性别',
                    type: 'pie',
                    radius: '55%',
                    center: ['50%', '60%'],
                    data: data['data'],
                    itemStyle: {
                        emphasis: {
                            shadowBlur: 10,
                            shadowOffsetX: 0,
                            shadowColor: 'rgba(0, 0, 0, 0.5)'
                        }
                    }
                }]
            };


            // 使用刚指定的配置项和数据显示图表。
            myChart.setOption(option);
        }
    });
</script>
</body>

</html>